<template>
	<view class="page" :style="'height:' + height + 'rpx'">
		<view :class="{'iconfont': true,'icon-huidingbu': isShowReback}" id="reback" @click="toTop()"></view>
		<view class="toTop">
			<!-- <view style="height: 100%;width: 100%;position: relative;"> -->
			<view class="tkl"v-if="code">
				<text style="margin-right: 10rpx;">淘口令:</text>
				<text>{{code}}</text>
			</view>
			<view class="tkl"v-else>
				很抱歉，该优惠券已过期。
			</view>
			<button class="code_button" @click="copCode()">复制淘口令</button>
			<!-- </view> -->
		</view>
		<view :style="'height:' + navBarHeight + 'rpx'" class="top">
			<view class="nav-main">
				<!-- 胶囊区域 -->
				<view class="capsule-box"
					:style="'height:' + menuHeight + 'px; min-height:' + menuHeight + 'px; line-height:' + menuHeight + 'px; bottom:' + menuBotton + 'px;left:' + menuRight + 'px;'">
					<!-- 导航内容区域 -->
					<view class="content">
						<view class="iconfont icon-fanhui" @click="reback()"></view>
						<!-- <button @click="share()" class="iconfont icon-fanhui"  plain></button> -->
						<!-- 								<button open-type="share" @click="share()" class="iconfont icon-fenxiang2-copy"
							:style="'right:' + (menuWidth + 30) + 'px'" plain></button> -->
						<!-- <view @click="share()" class="iconfont icon-fenxiang2-copy" :style="'right:' + (menuWidth + 30) + 'px'"></view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper class="swiper u-skeleton-rect" indicator-dots interval duration @click="priewImage" :style="'height:' + screenWidth + 'px'"
			@change="imageChange" autoplay duration=300 interval=3500 circular>
			<swiper-item v-for="(item,index) in detailData.itemBanner" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="main skeleton" >
			<view class="first_box box u-skeleton-rect" v-show="detailData.itemVoucherPrice">
				<view class="price ">
					<text class="newPrice">
						<text
							style="font-size: 30rpx;margin-left: 10rpx;letter-spacing: 2rpx;color: #EE4000;font-weight: 700;">
							券后:</text>
						<text
							style="font-size: 42rpx;font-weight: 700; color: #EE4000;">￥{{detailData.itemVoucherPrice}}</text>
					</text>
					<text class="oldPrice">
						<text>￥{{detailData.itemPrice}}</text>
					</text>
				</view>
				<view class="number " v-if="detailData.saleMonthV2">
					<text>月销</text>
					<text>{{detailData.saleMonthV2}}</text>
				</view>
			</view>

			<view class="title box u-skeleton-rect" v-if="detailData.itemTitle">
				<text class="iconfont icon-taobao" style="position: absolute;top: -5rpx;"></text>
				<text style="margin-left: 60rpx;">{{detailData.itemTitle}}</text>
			</view>
			<view class="box u-skeleton-rect" style=" color: #5E5E5E;letter-spacing: 2rpx;text-align: right;" v-if="detailData.shopName">
				<text class="iconfont icon-dianpu" style="margin-right: 10rpx;font-size: 28rpx;"></text>
				<text>{{detailData.shopName}}</text>
			</view>

			<!-- <view class="categoryName u-skeleton-rect"> -->
			<!-- <view>类型</view> -->
			<!-- <view class="categoryName_item">{{detailData.categoryName}}</view>
				 -->
			<!-- 				<text class="categoryName_item">{{detailData.categoryName}}</text>
			</view> -->
			<!-- <view style="padding-left: 20rpx; color: #5E5E5E;letter-spacing: 2rpx;font-size: 24rpx;">商品数据来源于蜜源</view> -->
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<view class="ticket u-skeleton-rect" v-show="detailData.ticket">
			<view class="ticket_info"  >
				<view class="ticket_info_box">
					<view class="ticket_info_price">
						<!-- 小圆圈 -->
						<view class="cicle_common cicle_first "></view>
						<!-- 小圆圈 -->
						<view class="ticket_info_price_left">
							<view class="ticket_info_price_left_icon">￥</view>
							<view class="ticket_info_price_left_price">{{detailData.ticket}}</view>
						</view>
						<view class="ticket_info_price_right">优惠劵</view>
					</view>
					<view class="ticket_info_time" v-if="detailData.couponStartTimeHhmmss && detailData.couponEndTimeHhmmss">
						<text>{{detailData.couponStartTimeHhmmss}} 至 {{detailData.couponEndTimeHhmmss}}</text>
						<!-- 小圆圈 -->
						<view class="cicle_common cicle_second"></view>
						<!-- 小圆圈 -->
					</view>
					<view class="little_cicle" style="top:0rpx"></view>
					<view class="little_cicle" style="top:25rpx"></view>
					<view class="little_cicle" style="top:50rpx"></view>
					<view class="little_cicle" style="top:75rpx"></view>
					<view class="little_cicle" style="top:100rpx"></view>
					<view class="little_cicle" style="top:125rpx"></view>
					<view class="little_cicle" style="top:150rpx"></view>
					<view class="little_cicle" style="top:170rpx"></view>
				</view>
			</view>
			<view class="ticket_method" @click="clickTicket()">
				<text>立即</text>
				<br />
				<text>领取</text>
			</view>
		</view>
		<view class="describe_title u-skeleton-rect" v-if="describe && detailData.categoryName != '英语四六级'">【商品描述】</view>
		<view class="describe u-skeleton-rect" v-if="describe&&detailData.categoryName != '英语四六级'">
			{{describe}}
			</br>
			数据来源于GZMY
		</view>
<!-- 		<view class="likeTitle u-skeleton-rect" v-if="(detailData.categoryName != null) || (detailData.categoryName != undefined)">
			<text>-相关</text>
			<text style="color: #fc8848;">【{{detailData.categoryName}}】</text>
			<text> 推荐-</text>
		</view>
		<view class="likeTitle u-skeleton-rect" v-if="(detailData.categoryName == null) || (detailData.categoryName == undefined)">
			<text>-猜你</text>
			<text> 喜欢-</text>
		</view> -->
		<view class="likeTitle u-skeleton-rect">
			<text>-相关</text>
			<text> 推荐-</text>
		</view>
		<view class="like_list u-skeleton-rect">
			<wareItem v-for="(item,index) in list" :key="index" :item="item" class="list_item wareItemRow"
				@wareDetail="wareDetail()">
			</wareItem>
		</view>
		<view class="loading" v-if="loading">
			<u-loading color="red" mode="semicircle" size="80"></u-loading>
			<!-- <view style="margin-left: 20rpx;" v-if="loadingBottom">正在加载更多商品...</view> -->
			<view style="margin-left: 20rpx;">加载中...</view>
		</view>


	</view>
</template>

<script>
	import wareItem from "../../components/wareItem/wareItem.vue";
	export default {
		onLoad(options) {
			// uni.showLoading({
			// 	title: '加载中..',
			// 	mask: true
			// });
			this.navBarHeight = getApp().globalData.navBarHeight, //导航栏高度
				// console.log(this.navBarHeight)
				this.menuRight = getApp().globalData.menuRight // 胶囊距右方间距（方保持左、右间距一致）
			this.menuBotton = getApp().globalData.menuBotton
			this.menuHeight = getApp().globalData.menuHeight
			this.menuWidth = getApp().globalData.menuWidth
			this.windowHeight = wx.getSystemInfoSync().windowHeight;
			this.screenWidth = wx.getSystemInfoSync().screenWidth;
			// console.log('窗口高度',this.windowHeight)
			this.header.Authority = uni.getStorageSync("Authority");
			// console.log(options.item)
			let temp = JSON.parse(options.item)
			// console.log(temp,'')
			if (options.item) {

				let item = JSON.parse(options.item);
				this.id = item.itemSourceId;
				this.describe = item.itemDesc;
				this.content = item.content;
				// console.log()
				this.getDetail();

			}
			if (options.id) {
				this.id = options.id;
				// this.describe = item.itemDesc;
				// console.log()
				this.getDetail();
			}
			// console.log(this.detailData, "数据")
			this.height = getApp().globalData.pageHeight;
			// this.getHotList()
			// this.getWareImage();
			// this.getKey();



		},
		onPageScroll: function(e) {
			// console.log('高度11',e.scrollTop)
			//页面滚动一定程度后再显示返回顶部
			if (e.scrollTop > 800) {
				this.isShowReback = true
			} else {
				this.isShowReback = false
			}
			this.showImage()
		},
		onHide() {
			// this.inputValue = ''
			getApp().globalData.toDetail = false;
			// console.log('进入详情页',getApp().globalData.toDetail)
		},

		onReachBottom() {
			// uni.showLoading({
			// 	title: '加载中..',
			// 	mask: true
			// });
			if (this.reachBottom) {
				this.reachBottom = false
				this.loading = true
				// if (this.detailData.categoryName) {
				// 	this.getQueryGoods(this.detailData.categoryName, ++this.currentPage)
				// } else {
				// 	this.getQueryGoods(this.key, ++this.currentPage)
				// 	}
				this.getQueryGoods(this.titleKey[this.count - 1], 1);
			}

			
			
		},
		// 分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '精美商品',
				path: '/page_ware/wareDetail/wareDetail?id=' + this.id
			}
		},
		data() {
			return {
				screenWidth: 0,
				windowHeight: 0,
				navBarHeight: 0,
				menuRight: 0,
				menuBotton: 0,
				menuHeight: 0,
				menuWidth: 0,
				id: '',
				height: 0,
				imageList: [], //照片数组
				detailData: null,
				describe: '', //商品描述
				currentImage: "0", //当前照片
				currentImageUrl: '',
				header: {
					Authority: ''
				},
				currentPage: 1,
				list: [],
				key: '', //主关键字
				code: '',
				codeInfo: '',
				loading: true,
				isShowReback: false, //显示返回顶部
				showWebView: false,
				reachBottom: true, //到达底部，控制成功获取数据后，页面到达底部才能继续加载
			    title: [] ,//商品标题
			    count: 0, //翻了几次页
			    lastLength: 0,//需要获取关键字的数据长度
			    titleKey: [], //标题的关键字
				content: '' //传过来的数据
			}
		},
		computed: {
			loadingStyle() {
				if (this.loadingBottom) {
					// console.log('这个')
					return 'loadingBottom'
				} else {
					// console.log('loading')
					return 'loading'
				}
			}
		},
		methods: {
			toTop() {
				wx.pageScrollTo({
					scrollTop: 0
				})
			},
			showImage() {
				// console.log('下拉')
				wx.createSelectorQuery().selectAll('.wareItemRow').boundingClientRect((ret) => {
					// console.log(ret,'数组')
					ret.forEach((item, index) => {

						if (item.top <= (this.windowHeight)) {
							// item.show = true
							this.list[index].show = true
						 // console.log(item,index)
						}
						// if (item.top <= height) { 判断是否在显示范围内
						//   group[index].show = true // 根据下标改变状态
						// }
					})
				}).exec()
			},
			//插入类别数据
			async insertData() {
				// console.log( this.detailData.categoryName,11)
				let res = await getApp().UniRequest("/goods/m/authority/clickCategory?categoryName=" + this.detailData
					.categoryName, "POST", "", this
					.header);
				// console.log('插入"类别"信息', res)

			},
			clickTicket() {
				this.copCode()
				// if (!this.code) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		showCancel: false,
				// 		content: '很抱歉，该优惠券已过期。',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				// console.log('用户点击确定');
				// 			} else if (res.cancel) {
				// 				// console.log('用户点击取消');
				// 			}
				// 		}
				// 	});
				// } else {
					

				// }

			},
			//去商品详情页
			wareDetail(item) {
				if (!getApp().globalData.toDetail) {
					// console.log('值')
					getApp().globalData.toDetail = true
					// this.focus = false;
					// console.log(item)
					let details = {}
					details.itemSourceId = item.itemSourceId;
					details.itemDesc = item.itemDesc;
					details.ticket = item.ticket;
				
					let Range = this.titleKey.length - 1;
					console.log('范围',Range)
					let Rand = Math.random();
					let num = Math.floor(Rand * Range); //舍去
					console.log(num,'随机数')
					details.content = this.titleKey[num];
					console.log('搜索数据',details.content)
				
						let id = item.id;
					uni.navigateTo({
						url: '../../page_ware/wareDetail/wareDetail?item=' + JSON.stringify(details)
					});
				}
			},

			//跳转到类别页面
			tocategory() {
				if (!getApp().globalData.toDetail) {
					// console.log('值')
					getApp().globalData.toDetail = true
					// this.focus = false;
					// console.log(item)
					let details = {}
					details.itemSourceId = item.itemSourceId;
					details.itemDesc = item.itemDesc;
					details.ticket = item.ticket;
				
					let Range = this.titleKey.length - 1;
					console.log('范围',Range)
					let Rand = Math.random();
					let num = Math.floor(Rand * Range); //舍去
					console.log(num,'随机数')
					details.content = this.titleKey[num];
					console.log('搜索数据',details.content)
				
						let id = item.id;
					uni.navigateTo({
						url: '../../page_ware/wareDetail/wareDetail?item=' + JSON.stringify(details)
					});
				}
				// uni.navigateTo({
				// 	url: '../categoryList/categoryList?categoryName=' + this.detailData.categoryName
				// });
			},

			//获取商品详情
			getDetail() {
				uni.request({
					url: 'https://api.gzmiyuan.com/api/goods/center/jsonp/details?itemSource=1&itemSourceId=' +
						this.id + '&supplierCode=&itemFrom=1&inviteCode=YFRPEB&extendJson=',
					success: (res) => {
						// console.log(res.data, '蜜源数据详情');
						if (res.data.code == "B00000") {
							this.detailData = res.data.data;
							// console.log(this.detailData);
							let newPrice = this.detailData.itemVoucherPrice;
							let oldPrice = this.detailData.itemPrice;
							let down = oldPrice - newPrice;
							if (down >= 0) {
								this.detailData.ticket = down.toFixed(1)
								// this.detailData.couponPrice = down.toFixed(1)
							} else {
								this.detailData.ticket = 0
								// this.detailData.couponPrice = 0
							}
							// uni.getImageInfo({
							// 	src: this.detailData.itemPictureMax,
							// 	success: function(image) {},
							// 	fail(error) {
							// 		console.log('错误信息', error)
							// 		this.detailData.itemPictureMax = 'http://1.14.247.152:9797/images/nopic.png'
							// 	}
							// });
							// this.detailData.itemBanner.unshift(this.detailData.itemPictureMax)
							
							this.getCode();
							this.getQueryGoods(this.content, this.currentPage)
							// this.getKey()
							// if (this.detailData.categoryName) {
							// 	this.getQueryGoods(this.detailData.categoryName, this.currentPage)
							// } else {
								
							// }
							

						}
						// this.insertData()

					},
					fail(error) {
						// console.log('错误', error)
					}
				});
			},
			//返回上一页面
			reback() {
				// 回退页面携带参数
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				// console.log(pages);
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				// prevPage.$vm.xlsId = this.xlsId;
				// prevPage.$vm.originName = this.originName;
				uni.navigateBack({
					delta: 1
				})
			},
			//获取图片信息
			// async getWareImage() {
			// 	let that = this;
			// 	let res = await getApp().UniRequest("/goods/getImgById?id=" + this.id, "Get", "", this
			// 		.header);
			// 	let errorImageNum = 0;
			// 	if (res.code === 20000) {
			// 		res.data.data.forEach((item, index) => {
			// 			uni.getImageInfo({
			// 				src: item,
			// 				success: function(image) {
			// 					that.imageList.push(item)

			// 				},
			// 				fail(error) {}
			// 			});
			// 		})
			// 		if (res.data.data.length == 0) {
			// 			that.imageList.push('http://1.14.247.152:9797/images/nopic.png')
			// 		}
			// 		uni.hideLoading()
			// 	}
			// },

			//查看图片
			priewImage() {
				wx.previewImage({
					urls: this.detailData.itemBanner,
					indicator: 'none',
					current: this.currentImageUrl,
					loop: true
				})
			},

			//当前图片改变
			imageChange(event) {
				// console.log(event.detail)
				this.currentImage = event.detail.current;
				this.currentImageUrl = this.detailData.itemBanner[this.currentImage]
				// console.log(this.currentImage)
			},
			getCode() {
				uni.request({
					url: 'https://api.gzmiyuan.com/api/coupon/center/jsonp/getGenerate?itemSource=' + this
						.detailData.itemSource + '&itemSourceId=' + this.detailData.itemSourceId +
						'&itemTitle=' + this.detailData.itemTitle + '&itemDesc=' + this.detailData.itemDesc +
						'&itemPicture=' + this.detailData.itemPicture + '&itemPrice=' + this.detailData.itemPrice +
						'&couponPrice=' + this.detailData.couponPrice + '&itemVoucherPrice=' + this.detailData
						.itemVoucherPrice + '&saleMonth=' + this.detailData.saleMonth + '&couponUrl=' + this
						.detailData.couponUrl + '&inviteCode=YFRPEB',
					success: (res) => {
						// console.log(res.data, '淘口令');
						if (res.data.code === "B00000") {
							console.log(res.data.data, '淘口令')
							this.code = res.data.data.tkl;
							// this.codeInfo = res.data.data.tkl;
						}
						uni.hideLoading()
					},
					fail(error) {
						// console.log('错误', error)
					}
				});
			},

			//复制code
			copCode() {
				if (!this.code) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '很抱歉，该优惠券已过期。',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				} else {
					wx.setClipboardData({ //设置要复制的内容
						data: this.code, //这里是要复制的内容，可使用动态变量代替
						succese: (res) => {
							console.log('设置复制内容成功', res);
							wx.getClipboardData({ //获取要复制的内容
								success: res => {
									// console.log('获取复制内容成功', res)

								}
							})
						}
					})
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '淘口令已复制，打开淘宝即可领取优惠券！',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
				// console.log('复制');
				// console.log(this.code)

			},
			async sendTitle(keyword,titleList) {
				let data = {
					keyword: '',
					titleList: []
				}
				data.keyword = keyword;
				data.titleList = titleList;
				// console.log('获取关键词参数，',data)
				let res = await getApp().UniRequest("/goods/getTenKeyWord","POST",data, "");
					// console.log('获取关键词',res)
					if (res.code === 20000) {
						this.titleKey = res.data.data;
						// console.log(this.titleKey)
					}
			},

			//获取主页关键字
			async getKey() {
				let res = await getApp().UniRequest("/goods/m/getListKey", "Get", "", this
					.header);
				// console.log('主页关键字', res)
				if (res.code === 20000) {
					this.key = res.data.data[0].titleLike;
					// console.log(this.key, 111)
					// console.log(this.key, '热门推荐')
					this.getQueryGoods(this.key, this.currentPage)
				}
			},

			//获取热门商品
			async getQueryGoods(content, currentPage, callback) {
				uni.request({
					url:  'https://api.gzmiyuan.com/api/goods/center/jsonp/search?itemSource=1&keywords= '+ content  + '&searchType=1&coupon=1&page=' + currentPage + '&rows=20&sort=&order=&supplierCode=&inviteCode=YFRPEB', //仅为示例，并非真实接口地址。

					success: (res) => {
						// console.log(res.data, '蜜源数据');
						// console.log('参数',content,currentPage)
						if (res.data.code == "B00000") {
							this.list.push(...this.dataChange(res.data.data.data));
							this.loading = false
							this.reachBottom = true
							
							this.count ++;
							if (this.count === 1 ) {
								this.lastLength = res.data.data.data.length;
								// console.log('数据长度',this.lastLength)
							}
							
							//每1、28、55页时重置title，并发起请求
							if (this.count % this.lastLength === 1) {
								// console.log(this.count,'title数组要加值');
								this.title = [];
								this.count = 1;
								for (let i = 0; i < this.lastLength; i++ ) {
									this.title.push(this.list[i].itemTitle);
								}
								this.sendTitle(content,this.title)
								// console.log(this.title,'标题数组')
							}
							// //加载更多时出现的情况
							// if (res.data.data.data.length === 0 && this.list.length != 0) {
							// 	this.noMoreData = true
							// } else {
							// 	//有数据
							// 	this.noData = false
							// 	this.list.push(...this.dataChange(res.data.data.data));
							// 	}

							// 	//一条数据都没有
							// 	if (this.list.length === 0) {
							// 		this.noData = true
							// 	}

							// 	// console.log(this.list)
							uni.hideLoading();
							// 	this.loading = false
							// callback && callback()
						}

					},
					fail(error) {
						console.log('错误', error)
					}
				});
			},

			//对商品数据进行处理

			//对商品数据进行处理
			dataChange(data) {
				let result = []
				data.forEach((item, index) => {
					// console.log(item)
					let newPrice = item.itemVoucherPrice;
					let oldPrice = item.itemPrice;
					let down = oldPrice - newPrice;
					if (down >= 0) {
						item.ticket = down.toFixed(1)
						// item.couponPrice = down.toFixed(1)
					} else {
						item.ticket = 0
						// item.couponPrice = 0
					}
					if (this.currentPage == 1) {
						item.show = true
					} else {
						item.show = false
					}

					// //对图片数据处理，若图片地址错误更换为替代图片
					// uni.getImageInfo({
					// 	src: item.itemPictureMax,
					// 	success: function(image) {},
					// 	fail(error) {
					// 		// console.log('错误信息', error)
					// 		item.itemPictureMax = 'http://1.14.247.152:9797/images/nopic.png'
					// 	}
					// });
					result.push(item);

				})
				return result;
			},

			share() {
				console.log('分享')
			}

		},
		components: {
			wareItem
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// background-color: #F0F0F0;
		// background-color: #EDEDED;
		position: relative;

		* {
			box-sizing: border-box;
			padding: 0rpx;
			margin: 0rpx;
		}
		button {
			margin: 0rpx;
		}

		.icon-huidingbu {
			z-index: 1000;
			font-size: 80rpx;
			color: #fc8848;
			// background-color: #86F0BE;
			position: fixed;
			right: 30rpx;
			// top: 20rpx;
			bottom: 170rpx;

		}

		.toTop {
			width: 100%;
			height: 140rpx;
			position: fixed;
			bottom: 0rpx;
			background-color: #FFFFFF;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-shadow: 1rpx 1rpx 10rpx #EAEAEA;
			.tkl {
				width: 60%;
				font-size: 30rpx;
				font-weight: 700;
			}
			.code_button {
				width: 40%;
				height: 85rpx;
				color: #ffffff;
				background-color: #fc8848;
			}

		}

		.top {
			width: 100%;
			position: absolute;
			// background-color: pink;
			z-index: 1000;

			.nav-main {
				width: 100%;
				height: 100%;
				position: relative;

				// background-color: pink;
				.capsule-box {

					position: absolute;
					box-sizing: border-box;
					// background-color: pink;
					width: 100%;

					.content {
						position: relative;
						display: flex;
						align-items: center;
						color: #939393;

						button {
							// height: 100%;
							background-color: transparent;
							border: 1rpx solid transparent !important;
							color: #939393;
						}

						.icon-fanhui {
							font-size: 42rpx;
						}

						.icon-fenxiang2-copy {
							position: absolute;
							font-size: 42rpx;
							top: -20rpx;

						}

						.title {}
					}
				}
			}
		}

		.nav {
			z-index: 100;
			position: absolute;

			.nav-main {
				.capsule-box {
					.content {
						.icon-shangyige {
							font-size: 40rpx;
							color: #ffffff;
						}

						font-size: 40rpx;
					}
				}
			}
		}

		.swiper {
			// height: 700rpx;

			swiper-item {
				z-index: 10 !important;
				height: 100%;
				border-radius: 20rpx;

				image {
					height: 100%;
					width: 100%;

				}
			}
		}

		.main {
			min-height: 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx;
			// border-radius: 20rpx;
			border-bottom: 20rpx solid #eff1ec;
			margin-bottom: 30rpx;

			.box {
				min-height: 20rpx;
				padding-left: 10rpx;
			}

			.first_box {
				display: flex;
				height: 70rpx;
				line-height: 70rpx;
				justify-content: space-between;

				// background-color: pink;
				.price {
					height: 100%;
					line-height: 70rpx;

					// background-color: #FF9900;
					.newPrice {}

					.oldPrice {
						margin-left: 10rpx;
						text-decoration: line-through;
						color: #5E5E5E;
					}
				}

				.number {
					height: 100%;
					// background-color: #FF9900;
					// padding-left: 10rpx;
					// font-size: 32rpx;
					letter-spacing: 2rpx;
					color: #5E5E5E;

				}
			}

			.title {
				min-height: 40rpx;
				margin-top: 20rpx;
				padding-bottom: 10rpx;
				font-size: 33rpx;
				letter-spacing: 3rpx;
				font-weight: 700;
				position: relative;

				.icon-taobao {
					font-size: 54rpx;
					color: #fc8848;
				}
			}

			.categoryName {
				min-height: 40rpx;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
				margin-left: 10rpx;

				.categoryName_item {

					height: 60rpx;
					color: #ffffff;
					background-color: #EEC900;
					box-shadow: 1rpx 1rpx 10rpx #E0E0E0;
					padding: 10rpx 20rpx 10rpx 20rpx;
					border-radius: 10rpx;
				}
			}

		}

		.copy {
			border-radius: 10rpx;
			height: 500rpx;
			width: 100%;
			background-color: #EDEDED;
			padding-top: 30rpx;

			.copy_box {
				margin-top: 20rpx;
				border-top-left-radius: 100rpx;
				border-top-right-radius: 100rpx;
				height: 100%;
				padding: 20rpx;
				background-color: #FFFFFF;
				color: #545454;

				.copy_code {
					text-align: center;
					margin-top: 30rpx;
					font-size: 40rpx;
					font-weight: 700;
				}

				.code_title {
					margin-top: 30rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					font-size: 32rpx;
					letter-spacing: 2rpx;
					text-align: center;
				}

				button {
					margin-top: 50rpx;
					background-color: pink;
					width: 300rpx;
					height: 90rpx;
					background-color: #23B8FF;
					color: #FFFFFF;
					letter-spacing: 4rpx;
					position: relative;

				}


			}
		}

		.ticket {
			width: 93%;
			margin: 0 auto;
			height: 240rpx;
			background-color: #fc495f;
			border-radius: 10rpx;
			display: flex;

			.ticket_info {
				width: 75%;
				height: 100%;
				background-color: #fc495f;
				// padding: 20rpx;
				padding: 30rpx 0rpx 30rpx 20rpx;

				.ticket_info_box {
					height: 100%;
					background-color: #ffffff;
					position: relative;
					overflow: hidden;

					.little_cicle {
						position: absolute;
						right: -15rpx;
						top: 0rpx;
						width: 20rpx;
						height: 20rpx;
						background-color: #fc495f;
						border-radius: 80%;

					}

					.cicle_common {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background-color: #fc495f;
					}

					.ticket_info_price {
						height: 75%;
						background-color: #ffffff;
						position: relative;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fc495f;
						font-weight: 700;

						.cicle_first {
							top: -15rpx;
							left: -15rpx;
						}

						.ticket_info_price_left {
							height: 100%;
							// width: 60%;
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;

							.ticket_info_price_left_icon {
								// position: absolute;
								// line-height: 120rpx;
								font-size: 36rpx;
							}

							.ticket_info_price_left_price {
								// margin-left: 80rpx;
								font-size: 95rpx;
								text-align: center;
								line-height: 135rpx;

							}

						}

						.ticket_info_price_right {
							height: 100%;
							// width: 40%;
							margin-left: 10rpx;
							line-height: 135rpx;
							font-size: 40rpx;
							font-weight: 700;
						}
					}

					.ticket_info_time {
						height: 25%;
						// background-color: pink;
						font-size: 20rpx;
						line-height: 45rpx;
						text-align: center;
						color: #fc894d;
						font-weight: 700;

						.cicle_second {
							bottom: -15rpx;
							left: -15rpx;
						}
					}


				}
			}

			.ticket_method {
				width: 25%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				font-size: 40rpx;
			}
		}

		.describe_title {
			margin-top: 20rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #666666;
			letter-spacing: 2rpx;
			// font-weight: 700;
			text-align: center;
			// background-color: pink;
			// border-top: 20rpx solid #eff1ec;

			// border-bottom: 20rpx solid #eff1ec;

		}

		.describe {
			width: 100%;
			text-align: center;
			padding-left: 20rpx;
			padding-right: 20rpx;
			font-size: 26rpx;
			color: #666666;
			letter-spacing: 2rpx;

		}

		.likeTitle {
			margin-top: 50rpx;
			width: 100%;
			height: 140rpx;
			line-height: 100rpx;
			font-size: 38rpx;
			letter-spacing: 2rpx;
			font-weight: 700;
			text-align: center;
			// background-color: pink;
			border-top: 20rpx solid #eff1ec;

			// border-bottom: 20rpx solid #eff1ec;
		}

		.loading {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 38rpx;
			color: #666666;
			margin-bottom: 140rpx;
			background-color: #eff1ec;
			// position: absolute;
			// bottom: 120rpx;

		}

		// .loadingBottom {
		// 	width: 100%;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// 	font-size: 34rpx;
		// 	color: #666666;
		// }

		.noMoreData {
			text-align: center;
			font-size: 24rpx;
			color: #6B6B6B;
		}

		.like_list {
			min-height: 60rpx;
			padding: 0rpx 20rpx 20rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			background-color: #eff1ec;

			.list_item {
				width: 48%;
				// height: 400rpx;
				background-color: #ffffff;
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				padding-bottom: 10rpx;

			}

			&>.list_item:nth-child(1),
			&>.list_item:nth-child(2) {
				margin-top: 20rpx;
			}

		}

		// .loading {
		// 	display: flex;
		// 	position: absolute;
		// 	left: 50%;
		// 	top: 35%;
		// 	width: 300rpx;
		// 	height: 200rpx;
		// 	line-height: 200rpx;
		// 	font-size: 38rpx;
		// 	margin-top: -100rpx;
		// 	margin-left: -150rpx;
		// 	// background-color: pink;
		// 	color: #666666;

		// }

		// .loadingBottom {
		// 	width: 100%;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// 	font-size: 34rpx;
		// 	color: #666666;
		// }

		.noMoreData {
			text-align: center;
			font-size: 24rpx;
			color: #6B6B6B;
		}

	}
</style>
